<template>
  <div style="position:relative" class="home">
    <!-- 导航栏 -->
     <div class="topDom" id="navBar">
       <nav_bar title='项目管理' background='#fff' >
       </nav_bar>
     </div>
     <!-- 导航栏 end -->

    <!-- <scroll-view scroll-y="true" @scroll="scroll" style="height:100vh"> -->
       <!-- 头部信息 -->
    <div class="header" >
      <div class="header-logo-wrapper">
        <img :src="photo_url" alt="" class="header-logo" @click="toProjectList">
        <div class="navigator_wrapper" v-if="noLoginFlag">
            <navigator url="/pages/login/main">登录/注册</navigator>
          </div>
          <!--<div class="navigator_wrapper" v-if="noBindingFlag">
            <navigator url="/pages/register/main">登录/注册</navigator>
        </div>-->
      </div>
      <div v-if="!noLoginFlag&&!noBindingFlag">
        <picker
          @change="changeProject"
          :value="item_index"
          :range="projectList"
          range-key="name"
        >
         <div class="picker-content">
           <div class="header-content">{{project_input.name}}</div>
        <img src="../../../static/images/icon/arrowR.png" alt="" class="header-arrowR">
         </div>

        </picker>
      </div>

    </div>
    <!-- 头部信息 end -->

    <!-- 车牌选择 -->
    <div class="plate-wrapper" :style="{top:navBarHeight+'px'}" >
        <div class="plate-input">
          <div @click="shoKeyBoardFn" class="input" v-if="plate_num">{{plate_num}}</div>
          <div class="input" @click="shoKeyBoardFn" v-else style="color:gray">请输入车牌号</div>
          <img src="../../../static/images/icon/camera.png" alt="" class="icon_camera" @click="uploadCarId">
        </div>
        <form name='pushMsgFm' report-submit @submit="delivery($event)" >
              <button form-type="submit" class="plate-btn" >
                  开始收货
              </button>
          </form>
    </div>
    <!-- 车牌选择end -->


    <!-- 列表 -->
  <div class="projectList" >
    <div class="itemListWrapper" :style="{top:navBarHeight+headerHeight+'px'}">
      <div class="label">项目记录</div>
      <div v-if="showTabFlag">
        <van-tabs type="card" color="#f28b00" :active="tabIndex" tab-class="tab-custom" custom-class="home-tab-custom"  nav-class="nav-custom" @change="tabChange">
        <van-tab title="收货中"  :info="recordType==1?steelListInfo.undone_num||'':''" :name="1"></van-tab>
        <van-tab title="已完成" :info="recordType==2?steelListInfo.completed_num||'':''"  :name="2" class="home-tab-receive"></van-tab>
      </van-tabs>
      </div>
    </div>
    <div class="itemList">
      <div   v-for="(item,index) of steelList" :key="index">
        <van-swipe-cell :right-width="60" disabledLeft :left-width="0">
            <van-cell-group>
              <div class="item"  @click="toProjectDetail(item)">
                <div class="content" >
                  <div class="item_name">
                    <!-- <img src="../../../static/images/tabBar/news.png" alt="" class="news" v-show="item.is_new"> -->
                    <span>{{item.plate_num}}</span>
                  </div>
                  <div class="item_time">{{item.created_at}}</div>
                </div>
                <div class="item_status">
                  <div class="status-name" v-show="item.status==1">收货中</div>
                  <div class="status-name status_nocomplete" v-show="item.status==2">已完成</div>
                  <img src="../../../static/images/icon/go.png" alt="" v-show="item.status==1">
                </div>
              </div>
            </van-cell-group>
            <div slot="right" class="slot-right"><div @click="deletePai(item,index)" class="slot-right-btn">删除</div></div>
        </van-swipe-cell>
      </div>
    </div>
  </div>
  <!-- 列表 end -->
    <!-- </scroll-view> -->

  <!-- 日历选择器 -->
  <img src="../../../static/images/icon/searchDate.png" alt="" class="searchDate" @click="showCalendarFn">
  <van-popup
          :show="showCalendar"
          position="bottom"
          duration="300"
          @close="closeCalendar"
        >
  <calendar @select="selectDate" @getDate="getDate" ref="calendar" :project_id="project_id"></calendar>
  </van-popup>
  <!-- 日历选择器end -->

<!-- 显示日期的项目数据 -->
  <van-popup
          :show="showSelectData"
          position="bottom"
          duration="300"
          @close="closeSelectData"
        >
      <div class="itemList popupList">
        <button class="btn_back" @click="backToCalendar">返回</button>
      <div   v-for="(item,index) of dayRecordSteel" :key="index" >
        <van-swipe-cell :right-width="60" disabledLeft :left-width="0">
            <van-cell-group>
              <div class="item" @click="toProjectDetail(item)">
                <div class="content" >
                  <div class="item_name">
                    <!-- <img src="../../../static/images/tabBar/news.png" alt="" class="news" v-show="item.is_new"> -->
                    <span>{{item.plate_num}}</span>
                  </div>
                  <div class="item_time">{{item.created_at}}</div>
                </div>
                <div class="item_status">
                  <div class="status-name" v-show="item.status==1">收货中</div>
                  <div class="status-name status_nocomplete" v-show="item.status==2">已完成</div>
                  <img src="../../../static/images/icon/go.png" alt="" v-show="item.status==1">
                </div>
              </div>
            </van-cell-group>
            <div slot="right" class="slot-right"><div @click="deletePai(item,index)" class="slot-right-btn">删除</div></div>
        </van-swipe-cell>
      </div>
    </div>
  </van-popup>
  <!-- 显示日期的项目数据end -->


  <!-- <navBar/> -->

<!-- 车牌输入法 -->
  <van-popup
          :show="showKeyboard"
          position="bottom"
          duration="150"
          overlay-style="background:none"
          @close="closeKeyBord"
        >
    <plate-number-keyboard :show="true" @getResult="setNumber"></plate-number-keyboard>
    </van-popup>
    <!-- 车牌输入法end -->
  </div>
</template>
<script>
import navBar from '@/components/navBar/index.vue'
import calendar from '@/components/calendar.vue'
export default {
  data() {
    return {
      photo_url:"http://file.rzkeji.com/web/recruit/icon/default.png",//个人头像
      noBindingFlag:'',//未绑定手机
      noLoginFlag:'',//未登录
      navBarHeight:0,//navBar的实际高度
      headerHeight:0,//头像header的实际高度
      project_index:[0],
      project_input:'',
      projectList:[],//项目
      recordType:1,//1收获中，2已完成
      page:1,
      point_item_id:'',//点击新消息跳转的id
      showKeyboard:false,//显示车牌键盘
      plate_num:'',//车牌号

      showCalendar:false,//显示日历
      dateYM:{//日历的年和月
        month:'',
        year:''
      },
      date:'',//选中的日历日期
      showSelectData:false,//显示日期的项目数据
      dayRecordSteel:'',//当天的点条记录
      steelList:[],//点条项
      steelListInfo:'',//点条项信息
      page_info:'',
      initFlag:true,//用来避免选图片时，刷新页面
      showTabFlag:true,
      userInfo:''

    }
  },
  components:{
    navBar,
    calendar
  },
  computed: {
    project_id(){
      let id=this.project_input?this.project_input.id:'';
      return id
    }
  },
  methods: {
    async delivery($event){
      //开始收货

      //避免车牌有误
      if(this.plate_num==''){
        this.$currency.showToast('车牌号不能为空');
        return
      }
      var regExp = /(^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$)/
      if(!regExp.test(this.plate_num)){
        this.$currency.showToast('车牌号码有误');
        return
      }

      let params={
        project_id:this.project_id,
        user_token:wx.getStorageSync('userToken'),
        plate_num:this.plate_num,
        form_id:$event.target.formId,
      }
      let res=await this.$request.postData('/ucenter/insertPointItemByOneV2',params);
      this.$currency.showToast(res.data.message)

      //跳转收货
      if(res.data.level=='success'){

          this.page=1;
          this.steelList=[];
          this.getSteelList();//跟新项目记录

         let data=res.data.data
         var url = `/pages/countSteel/main?projectId=${data.project_id}&name=${data.project_name}&itemId=${data.id}&plateNum=${data.plate_num}`
        this.$currency.navigateTo(url)


      }
    },
    tabChange(e){
      //切换tab
      this.recordType=e.target.name;
      this.page=1;
      this.steelList=[];
      this.getSteelList()
    },
    async deletePai(item,index){
      //删除项目记录
       const select=await this.$currency.showModal('是否删除该项目记录','')
          if(select){
            const userToken=wx.getStorageSync('userToken')
            const res=await this.$request.postData('/ucenter/deletePointItem',{
              point_item_id:item.id,
              user_token:userToken
            })
            if(res.data.level=='success'){

              this.$currency.showToast(res.data.message)
              this.steelList.splice(index,1)
            }else{
              this.$currency.showToast(res.data.message)
            }

          }
    },
    toProjectList(){
      wx.switchTab({
        url:'/pages/me/main'
      })
    },
    backToCalendar(){
      this.showSelectData=false;
      this.showCalendar=true;
    },
    closeSelectData(){
      //隐藏日期的项目数据
      this.showSelectData=false;
    },
    closeCalendar(){
      //隐藏日历
      this.showCalendar=false
    },
    initYM(){
      //初始化日历的年月
      let date=new Date();
      let year=date.getFullYear();
      let month=date.getMonth()+1;
      this.dateYM={year,month};
    },
    showCalendarFn(){
      //显示日历
      this.$refs.calendar.getRemark(this.dateYM)
      this.showCalendar=true
    },
    selectDate(val){
      //选中日期
      let dateArr=val.date.split('-');

      this.date=dateArr.map(item=>{
        return +item
      })

      this.getThisDayRecord();
      this.showCalendar=false;
      this.showSelectData=true;
    },
    getDate(val){
      //获取日历当前显示的年月
      this.dateYM=val;
    },

    async getThisDayRecord(){
      //获取当天记录
      let params={
        project_id:this.project_id,
        year:this.date[0],
        month:this.date[1],
        day:this.date[2],
        user_token:wx.getStorageSync('userToken')
      }
      let res=await this.$request.getData('/ucenter/getThisDayRecord',params);
      if(res.data.level=='success'){
        this.dayRecordSteel=res.data.data.point_items;//当天的点条
      }
    },
    closeKeyBord(){
      //关闭键盘
      this.showKeyboard=false
    },
    shoKeyBoardFn(){
      //显示键盘
      this.showKeyboard=true
    },
    closeInput(){
      this.showKeyboard=false;
    },
    changeProject(e){
      //更换项目
      this.project_index=e.target.value;
      this.project_input=this.projectList[this.project_index];
      this.storeProject(this.project_index,this.project_input);
      this.page=1;
      this.steelList=[];
      this.getSteelList();

    },
    setNumber(e){//获取输入的车牌号
      this.plate_num=e.target.value
    },
    uploadCarId(){
      //上传车牌号识别
      this.uploadCarIdHandle('camera');
    },
    async uploadCarIdHandle(){
      //上传车牌号的处理函数
      this.initFlag=false
      let res=await this.$currency.upLoadImgNormal(this);
      const data=JSON.parse(res.data);
      const img_url=data.data.img_url;
      const id=data.data.id;
      const plateResult=await this.$request.postData('/ucenter/getNumberPlateTwo',{
        img_id:id
      })
      if(plateResult.data.level=='success'){
        this.plate_num=plateResult.data.data
      }else{
        this.$currency.showToast(plateResult.data.message)
      }
      this.initFlag=true;

    },


    // },
    toProjectDetail(item){
      // if(item.is_new){
      //     //记录点击过
      //     const userToken=wx.getStorageSync('userToken')
      //     this.$request.postData('/ucenter/saveProjectIfNew',{
      //       user_token:userToken,
      //       project_id:item.id
      //     })
      //   }
        var url = `/pages/countSteel/main?projectId=${item.project_id}&name=${item.project_name}&itemId=${item.id}&plateNum=${item.plate_num}`
        this.$currency.navigateTo(url)


    },
     async getProjectList(){
       //获取项目
      const userToken=wx.getStorageSync('userToken')

      const res=await this.$request.getData('/ucenter/getUserProject',{
        user_token:userToken,
      })
      if(res.data.level=='success'){
        this.projectList=res.data.data;
        if(this.projectList.length>0){
          //默认显示第一项
          if(this.$bus.PROJECT_HOME.project_input){//缓存涂鸦前的选中项目
            this.project_index=this.$bus.PROJECT_HOME.project_index;
            this.project_input=this.$bus.PROJECT_HOME.project_input;
          }else{
            this.project_index=0;
            this.project_input=this.projectList[0];
          }

          this.getSteelList()
        }
      }
      },
      storeProject(index,obj){
        //缓存选中的项目
        this.$bus.PROJECT_HOME.project_input=obj;
        this.$bus.PROJECT_HOME.project_index=index;

      },
      async getSteelList(){
        //获取点条子项
        const userToken=wx.getStorageSync('userToken');

        const res=await this.$request.postData('/ucenter/searchByCar',{
            project_id:this.project_id,
            user_token:userToken,
            plate_num:this.plateNum,
            page:this.page,
            order_by:'desc',
            type:this.recordType,
            limit:10
          })
          if(res.data.level=='success'){
            const list=this.steelList;
            this.steelList = [...list,...res.data.data.point_items];
            this.page_info=res.data.page_info;
            this.steelListInfo=res.data;
            wx.stopPullDownRefresh()
          }
        },
        initData(){
          this.recordType=1;
          this.project_index=[0];
          this.project_input='';
          this.projectList=[];//项目
          this.page=1;
          this.point_item_id='';//点击新消息跳转的id
          this.showKeyboard=false;//显示车牌键盘
          this.plate_num='';//车牌号

          this.showCalendar=false;//显示日历
          this.dateYM={//日历的年和月
            month:'',
            year:''
          };
          this.date='';//选中的日历日期
          this.showSelectData=false;//显示日期的项目数据
          this.dayRecordSteel='';//当天的点条记录
          this.steelList=[];//点条项
          this.steelListInfo='';//
          this.page_info='';
          this.initFlag=true;//可以进行更新数据

          this.showTabFlag=false;
          setTimeout(()=>{
            this.showTabFlag=true;
          },10)
        },
        async updateProjectList(){
          //更新项目
          const userToken=wx.getStorageSync('userToken')

          const res=await this.$request.getData('/ucenter/getUserProject',{
            user_token:userToken,
          })
          if(res.data.level=='success'){
            this.projectList=res.data.data;
            this.userInfo=res.data.user_info
            wx.stopPullDownRefresh()
          }
      },
      async getUserInfo(){
        //获取用户信息
      var userToken=wx.getStorageSync('userToken')
        let res=await this.$request.getData('/ucenter/getUserInfo',{user_token:userToken})
          if(res.data.data instanceof Object){
          this.photo_url=res.data.data.user_info.photo_url
          this.noLoginFlag=false;
          this.noBindingFlag=false;
          }else if(res.data.level=='error'){
            if(res.data.data=='no_login'){
              this.noLoginFlag=true;
            }else if(res.data.data=='no_binding'){
              this.noBindingFlag=true;
            }
        }
      },
      getHeaderHeight(){
        //获取头部实质高度
        let _this=this
        var query = wx.createSelectorQuery();
        query.select('#navBar').boundingClientRect()
        query.exec((res) => {
          var navBarHeight = res[0].height; // 获取navBarHeight高度
          _this.navBarHeight=navBarHeight;
        })

        var query1 = wx.createSelectorQuery();
        query1.select('.plate-wrapper').boundingClientRect()
        query1.exec((res) => {
          var headerHeight = res[0].height; // 获取headerHeight高度
          _this.headerHeight=headerHeight;
        })
      }

  },
  onShow(){
    if(this.$bus.$data.updateHome){
      //从login页或者从register页进入后，刷新数据
      this.initData()
      this.getUserInfo();
      this.getProjectList();
      this.initYM();
      this.$bus.$data.updateHome=false
    }

  },

   onPullDownRefresh() {
     this.plate_num='';
     this.page=1;
     this.steelList=[];
     this.getSteelList();
     this.updateProjectList()
    // Do something when pull down.
  },
  onLoad(){
    if(!this.$bus.$data.noFirstLoadHome){
      //首页加载一次后，不再刷新
      this.getHeaderHeight();
      this.getUserInfo();
      this.getProjectList();
      this.initYM();
      this.$bus.$data.noFirstLoadHome=false;
    }
  },
  onReachBottom(){
    this.page++;
    this.getSteelList()
  },
}
</script>
<style lang="scss" scoped>
$base-color:#f28b00;
  .projectList{
    width: calc(100% - 20px);
    margin-left: 10px;
    font-size: 14px;

  }
  .label{
    font-size: 17px;
    margin:10px 0;
    color:#000;
    font-weight: 600;
  }

  //头部信息
  .header{
    color:$base-color;
    display: flex;
    align-items: center;
    padding:10px 20px;
    // position:sticky;
    background: #fff;
    // color:#9b9898;
    // z-index: 10;
    picker{
      flex:1;
      .picker-content{
        display: flex;
        align-items: center;
      }
    }

    .header-logo-wrapper{
      display: flex;
      align-items: center;
      .navigator_wrapper{
        margin-left: 20px;
      }
    }
    .header-logo{
      width: 55px;
      height: 55px;
      border-radius: 50%;
    }
    .header-content{
      font-size: 18px;
      margin-left:30px;
      margin-right: 20px;
    }
    .header-arrowR{
      width: 20px;
      height: 20px;
    }

  }

  //车牌选择
  .plate-wrapper{
    margin: 10px;
    border-radius: 10px;
    border:1px solid #eee;
    padding-top:10px;
    position:sticky;
    background: #fff;
    z-index: 10;
    .plate-input{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      .input{
        font-size: 17px;
        width:150px;
        border-bottom: 2px solid #eee;
        margin-right: 10px;
        text-align: center;
      }
      .icon_camera{
        width:30px;
        height: 30px;
      }
    }
    .plate-btn{
      margin:10px auto 20px;
      color:#fff;
      width:120px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      background: $base-color;
      border-radius: 5px;
    }
  }

  .projectList_news{
    margin-top:30px;
  }
  .commit{
    font-size: 14px !important;
    width: 100%;
  }

  //项目列表
  .itemListWrapper{
    position: sticky;
    z-index:10;
    background:#fff;
  }
  .item{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding:20px 10px;
    margin: 10px 0;
    border: 1px solid #eee;
    border-radius:10px;
    content{
      flex:1;
    }
  }
  .item_name{
    flex:1;
    color:$base-color;
    font-size: 18px;
    display: flex;
    align-items: center;
    span:nth-child(2){
      max-width: 160px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
  }
  .item_status{
    position: relative;
    img{
      position: absolute;
      width:30px;
      height: 30px;
    }
    .status-name{
      color: #e64340;
      font-size: 17px;
      margin-bottom: 10px;
    }
  }
  .status_nocomplete{
    color:green !important;
  }
  .item_desc,.item_time{
    margin-top:10px;
  }
  .item_way{
    margin-top:10px;
    width: 100%
  }
  .btn{
    margin-top:20px;
    width: 100%;
    display: flex;
    align-items: center;
  }


//提示
.news{
  width: 25px;
  height: 25px;
}
.newTiao{
  background-color: #409eff!important;
  color: #fff !important;
  border-radius:5px;
  padding:2px 8px;
  display: flex;
  align-items: center;
  img{
    width: 25px;
    height: 25px;
    margin-right: 2px;
  }
}
.tip{
  position: fixed;
  width: 100%;
  button{
    color:#ff3366;
  }
}

//日期搜索图标
.searchDate{
  width: 30px;
  height: 30px;
  position: fixed;
  z-index: 5;
  left: 20px;
  bottom: 20px;
}

.popupList{
  width: 80vw;
  height: 60vh;
  overflow-y: scroll;
  margin:0 auto;
  .btn_back{
      margin:10px auto 20px;
      color:#fff;
      width:150px;
      height: 35px;
      text-align: center;
      line-height: 35px;
      background: $base-color;
      border-radius: 10px;
    }
}
.scroller{
  height: 200px;
}
</style>
<style>
  .tab-custom{
    border-radius: 10rpx;
    border:none !important;
    display: flex;
    align-items: center;
    justify-content: center;

  }
  .home-tab-custom {
    width:420rpx;
    height: 80rpx;
    padding-top:0 !important;
  }
  .home-tab-custom .van-tabs__wrap,.home-tab-custom .van-tabs__nav--card{
    height: 80rpx !important;
  }
 .home-tab-custom .van-tabs__scroll--card{
   border:none !important;
  }
  .nav-custom{
    color:red !important;

  }
  .slot-right{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  color:#fff;
  background: red;
}
.slot-right-btn{
    width:100%;
    text-align: center;
    height: 100%;
    line-height: 100px
  }

  .home-tab-receive .van-info {
    background: green !important;
  }

  .home .van-tab--active:last-of-type .van-info{
    background: green !important;
  }
</style>



